<!DOCTYPE HTML>
<html>

<head>
    <!--meta name="theme-color" content=""-->
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <!--meta content="user-scalable=0;" name="viewport" /-->
    <title>ShadowSkin - Tutorial</title>
</head>

<body oonload="">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding-left: 5vw;
            padding-right: 5vw;
            /*background-color:#fefffe;*/
            background: white;
        }

        * {
            font-size: 100%;
            color: black;
        }

        blockquote {
            color: dimgrey;
            border-left: 0.4em solid dimgrey;
            padding: 0 0.4em;
            line-height: 3.2em;
        }

        blockquote::first-letter {
            font-size: 3.5em;
            color: #555;
        }

        mark {
            border-radius: 0.1em;
            background: yellowgreen;
            padding: 0.2em;
            font-weight: bold;
        }

        hint {
            padding-left: 1em;
            border-left: 0.4em solid goldenrod;
            background-color: #ff9;
            margin-top: 3em;
            display: block;
        }

        hint,
        hint * {
            color: #660;
        }

        h1,
        h2,
        h3 {
            text-align: left;
            padding-left: 5vw;
            font-size: 5em;
            text-shadow: -2px 1px 7px grey;
            border-left: 0.4em solid yellowgreen;
            /*border-left-image:*/
        }

        p,
        blockquote,
        hint,
        li {
            font-size: 2em;
            line-height: 250%;
            font-weight: lighter;
        }

        img {
            margin: 4em 0;
            display: block;
            width: 100%;
            box-shadow: 0 0 5em -2em dimgrey;
        }

        #penblock:hover {
            background-color: deepskyblue;
            color: #555;
        }

        table {
            font-size: 1.6em;
            box-shadow: 0 0 4em -2em dimgrey;
            border-collapse: collapse;
            color: green;
            table-layout: fixed;
            width: 100%;
        }
    </style>
    <h1>ShadowSkin须知</h1>
    <p style="color: orangered;">
        请不要使用软件内置浏览器绘制皮肤，而要使用专门的浏览器！因为使用软件内置浏览器可能会导致兼容性问题、数据丢失、无法导出文件等问题。<br>
        同时不要编辑ShadowSkin自带的Steve和Alex皮肤，否则网页刷新后将丢失数据。如要使用请复制工程后再使用。
    </p>
    <p>
        这是ShadowSkin2的新手教程。ShadowSkin2的界面简洁易懂，所以教程只包含不易懂的部分。<br>
        编辑器页面在后续版本里还会继续更新，那教程总不能
        更新一下换一次吧。那就凑合一下咯！
    </p>
    <h3>简短说一下</h3>
    <p>
        ShadowSkin是基于<strong>手机版</strong>的！pc端目前还没有做，不过PC端已经有Skin3d了，所以呢就用那个吧。如果你是ShadowSkin的忠实粉丝，那你也可以按F12打开
        开发者模式，左上角有手机版模拟器。再次声明，PC端是完全无法使用的！<br>
        ShadowSkin使用GPL3.0许可，您的一切行为需要遵守GPL3.0的协议。如果您仅使用，可以忽略它。如果您需要转载，请注明作者，并且<strong>保持开源</strong>。
        作者FancyFlame保留所有权利。所以还是不要魔改了吧。<br>
    </p>
    <h3>开始教程</h3>
    <p>
        右侧栏是显示用的。这边展示了三个隐藏的UI界面。（可能有点动画异常，后期会修复)
        <img src="tutorial_pic/show_ui.gif">
        手指往UI弹出的地方往回拖能收回面板，但是参照图的不行。
        <img src="tutorial_pic/fast_close.gif">
        手指往右下角拖能放大参照图。
        <img src="tutorial_pic/zoom.gif">
        点击参照图能取色。
        <img src="tutorial_pic/get_color.gif">
        手指滑动编辑面板的<strong>空白部位</strong>能拖动模型旋转查看。但不能平移和缩放。
        <img src="tutorial_pic/view_model.gif">
        右上角有三角形的是多模式工具。上划可切换模式。
        <img src="tutorial_pic/change_mode.gif">
        画笔上划可以将画笔储存为模板画笔（上面一行），下划长距离则是删除。如果在模板画笔里面上划，将会移动到第一位。
        <img src="tutorial_pic/set_pen.gif">
        看下面这张图
        <img src="tutorial_pic/pen_block.jpg">
        <ul>
            <li>R代表Rectangle，为矩形笔头。另外C是Circle，为圆形笔头</li>
            <li>1代表半径为1</li>
            <li>100代表不透明度是100</li>
            <li>背景色就是当前画笔颜色</li>
            <li>圆角矩形也代表这是矩形笔头，圆形就代表圆形笔头</li>
        </ul>
    </p>

    <p>
        那么，教程到这里就结束了。如果还有不懂<br>
        那我也没办法了QAQ
    </p>
</body>

</html>